<template>
  <div class="todo-list">
    <h2>
        <slot name="title">
            代办事项清单
        </slot>
    </h2>
    <div class="todo-list-input">
        <div>
            <input class="todo-list-input__input" placeholder="添加新事项..." v-model="editText"/>
        </div>
        <div @click="addMessageItem">
            <slot name="submit">
                <button class="todo-list-input__button">+</button>
            </slot>
        </div>
    </div>
    <div class="todo-list-view">
        <div class="todo-list-view-item" @click="toFinish(item)" v-for="(item, index) in messageList" :key="index">
            <div class="todo-list-view-item-redme" >
                <div class="todo-list-view-item__left-icon">
                    <slot name="left">
                        <div style="margin-left:24px">
                            <transition-group name="fade">
                                <i v-show="item.isDelete" class="fa-solid fa-circle-check transition-check" :key="1"></i>
                                <i v-show="!item.isDelete" class="fa-regular fa-circle-check transition-check" :key="2"> </i>
                            </transition-group>
                        </div>
                    </slot>
                </div>
                <div :class="{'todo-list-view-item__text':true,'delete': item.isDelete}">
                    {{item.text}}
                </div>
            </div>
            <div class="todo-list-view-item__right-icon" @click.stop="toDelete(index)">
                <slot name="right">
                    <i class="fa-regular fa-trash-can"></i>
                </slot>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"TodoList",
    data:()=>({
        messageList: [],
        editText: ''
    }),
    created(){
        this.messageList = JSON.parse(localStorage.getItem('todoList')) || [] 
    },
    methods:{
        addMessageItem(){
            if(this.editText){
                this.messageList.push({
                    isDelete: false,
                    text: this.editText
                })
                localStorage.setItem('todoList',JSON.stringify(this.messageList))
            }
        },
        toFinish(item){
            item.isDelete = !item.isDelete
            localStorage.setItem('todoList',JSON.stringify(this.messageList))
        },
        toDelete(index){
            this.messageList.splice(index, 1)
            localStorage.setItem('todoList',JSON.stringify(this.messageList))
        }
    }
}
</script>

// 外部模块
<style lang="scss" scoped>
    .todo-list{
        background-color: #f5f5f5;
        width: 500px;
        min-height: 400px;
        max-height: 624px;
        border-radius: 8px;
        padding: 32px;
        h2{
            margin-top: 0px;
            text-align: left;
        }
        .todo-list-input{
            text-align: left;
            display: flex;
           
            .todo-list-input__input{
                width: 400px;
                border: none;
                background-color: transparent;
                border-bottom: 2px solid #ccc;
                padding: 0 8px; 
                line-height: 50px;
                font-size: 20px;
                &:focus-visible{
                    outline: none;
                }
            }
            .todo-list-input__button{
                cursor: pointer;
                width: 50px;
                height: 50px !important;
                flex-shrink: 0;
                height: 100%;
                margin-left: 20px;
                padding: 0;
                border-radius: 50%;
                font-size: 28px;
                border: none;
                color: rgb(145, 145, 145);
                background-color: rgb(255, 255, 255);
                box-shadow: 3px 5px 5px 1px rgb(184, 184, 184),
                -1px -0px 3px 2px rgb(196, 196, 196);
            }
        }
    }
</style>

// 列表样式
<style lang="scss" scoped>
.delete{
    text-decoration: line-through;
    color: rgb(128, 128, 128);
}
.todo-list-view{
    padding: 5px;
    overflow: hidden;
    overflow-y: scroll;
    margin: 10px 0 0;
    max-height: 500px;
    &:hover::-webkit-scrollbar{
        width: 8px;
    }
    &::-webkit-scrollbar{
        width: 4px;
        transition: all .3s;
        
    }
    &::-webkit-scrollbar-track{
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    &::-webkit-scrollbar-thumb{
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
}
.todo-list-view-item{
    background-color: #fff;
    margin: 0 0 10px 0;
    font-size: 24px;
    padding: 10px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    transition: all .3s;
    .todo-list-view-item-redme{
        display: flex;
        .todo-list-view-item__left-icon{
            margin-right: 10px;
            position: relative;
            .transition-check{
                position: absolute;
                left: 0;
                line-height: 31px;
            }
        }
        .todo-list-view-item__text{
            transition: all .3s;
        }
    }
    .todo-list-view-item__right-icon{
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: all .3s;
        &:hover{
            color: red;
        }
    }
    &:hover{
        .todo-list-view-item__right-icon{
            opacity: 1;
        }
        box-shadow: 0px 0px 0px 2px #2c3e50;
    }
}
</style>

// 动画模块
<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>